<template>
  <div class="app-container">
    <el-divider content-position="left"><h3>父页面定义ref获取子页面方法传值 [配置了按钮权限指令 admin有删除权限， editor没有删除权限]</h3></el-divider>
    <!-- 搜索示例 -->
    <div class="u-search c">
      <el-input v-model="search.input" size="small" placeholder="请输入内容" clearable />
      <el-button size="small" icon="el-icon-search">搜索</el-button>
      <el-button size="small" icon="el-icon-refresh">重置</el-button>
      <el-button size="small" icon="el-icon-plus" type="primary" plain @click="addClick(null, 'add')">添加</el-button>
      <el-button class="fr" size="small" icon="el-icon-sort" type="primary" plain>同步帐号</el-button>
    </div>
    <!-- 表格示例 -->
    <el-table class="u-table" :data="dataList" style="width: 100%" height="calc(100vh - 270px)" border>
      <el-table-column label="序号" type="index" align="center" width="50" show-tooltip-when-overflow />
      <el-table-column label="ID" min-width="100" align="center" prop="id" show-tooltip-when-overflow />
      <el-table-column label="标题" min-width="150" align="center" prop="title" show-tooltip-when-overflow />
      <el-table-column label="作者" min-width="60" align="center" prop="author" show-tooltip-when-overflow />
      <el-table-column label="Display_time" align="center" prop="created_at" width="200">
        <template slot-scope="scope">
          <i class="el-icon-time" />
          <span>{{ scope.row.display_time }}</span>
        </template>
      </el-table-column>
      <!-- 操作示例 -->
      <el-table-column prop="AAE016" label="操作" align="center" width="150" fixed="right">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="viewClick(scope.row)">查看</el-button>
          <el-button type="text" size="small" @click="editClick(scope.row)">编辑</el-button>
          <el-button v-permission="['201908211524']" type="text" size="small" @click="delClick(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- pagination -->
    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="queryList" />
    <!-- add-dialog -->
    <add-dialog ref="addDialog" :dialog="addDialog" @update="queryList" />
    <!-- end -->
  </div>
</template>

<script>
// 组件中注册自定义指令
import permission from '@/directive/permission/index.js' // 权限判断指令
import Pagination from '@/components/Pagination' // secondary package based on el-pagination
import AddDialog from './addDialog'
export default {
  components: { Pagination, AddDialog },
  directives: { permission },
  data() {
    return {
      loading: true,
      search: {},
      dataList: [],
      // page
      total: 0,
      listQuery: {
        page: 1,
        limit: 20
      },
      // addDialog
      addDialog: {
        visible: false
      }
    }
  },
  created() {
    this.queryList()
  },
  methods: {
    // 列表查询
    queryList() {
      this.loading = true
      this.$http.get('/table/list').then(res => {
        this.dataList = res.items
        this.total = res.total
        this.loading = false
      })
    },
    // 添加
    addClick() {
      this.addDialog.visible = true
      this.addDialog.title = '新增'
    },
    // 查看
    viewClick(row) {
      this.addDialog.visible = true
      this.addDialog.title = '查看'
      this.$refs.addDialog.queryData(row, 'view')
    },
    // 编辑
    editClick(row) {
      this.addDialog.visible = true
      this.addDialog.title = '编辑'
      this.$refs.addDialog.queryData(row, 'edit')
    },
    // 删除
    delClick(row) {
      this.$confirm('确认删除这条数据', { type: 'warning' }).then(_ => {
        // ....
      }).catch(_ => {})
    }
  }
}
</script>
